<style lang="less">
  .sysButton{
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1111;
  }
  .text-green {
    color: #39b54a!important;
  }
  .cu-dialog {
    position: fixed;
    bottom: 160rpx;
    width: 80%;
    left: 10%;
    margin: 0 auto;
    text-align: center;
    padding: 10rpx 0;
  }
  .sendInfo {
    .cu-dialog {
      background-color: rgba(248, 248, 248, 0.95);
    }
  }
</style>
<template>
  <div class="footer" v-if="!config.hidebot">
    <div class="sendInfo">
      <view class="cu-modal" :class="{'show':sendshow}" @tap.stop="sendBtn">
        <view class="cu-dialog">
          <view class="cu-avatar round lg margin-xs" :class="['bg-' + item.name]"
                v-for="(item, index) in colorList" :key="index" @tap.stop="sendLine(item)">
            <text class="avatar-text">{{item.title}}</text>
          </view>
        </view>
      </view>
    </div>
    <div class="sysButton">
      <view class="cu-bar tabbar bg-white foot meet_index">
        <view class="action" :class="{'text-default': current === 0}"
              @tap="fotNav('index/index', 0)">
          <view class="cuIcon-homefill"/>首页
        </view>
        <view class="action meet_square" :class="{'text-default': current === 1}"
              @tap="fotNav('square/index', 1)">
          <view class="cuIcon-similar">
            <view class="cu-tag badge" v-if="config.square">{{config.square}}</view>
          </view> 排行榜
        </view>
        <view class="action meet_message" :class="{'text-default': current === 3}"
              @tap="fotNav('auth/index', 3)">
          <view class="cuIcon-message">
            <view class="cu-tag badge" v-if="config.message">{{config.message}}</view>
          </view>作品
        </view>
        <view class="action meet_my" :class="{'text-default': current === 4}"
              @tap="fotNav('user/index', 4)">
          <view class="cuIcon-my">
            <view class="cu-tag badge" v-if="config.user">{{config.user}}</view>
          </view>我的
        </view>
      </view>
    </div>
  </div>
</template>
<script type="text/javascript">
  /** 底部的导航条
   * Created by PhpStorm.
   * User:  iyahe@qq.com (天明)
   * Date: 2020/1/2 0002
   * Time: 上午 11:15
   * Description:
   */
  export default {
    props:{
      tab: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        current: 0,
        colorList: [
          {
            title: '发全景',
            name: 'blue',
            color: '#0081ff',
            url: 'tour/send'
          },
          {
            title: '发素材',
            name: 'mauve',
            color: '#6739b6',
            url: 'tour/media'
          },
          {
            title: '找客服',
            name: 'pink',
            color: '#9c26b0',
            url: 'user/away?id=2'
          },
          {
            title: '发文章',
            name: 'cyan',
            color: '#1cbbb4'
          },
          {
            title: '找帮助',
            name: 'green',
            color: '#39b54a',
            url: 'user/away?id=3'
          }
        ],
        sendshow: false,
        config: {}
      }
    },
    watch: {
      tab () {
        this.current = this.tab;
      }
    },
    components: {},
    methods: {
      fotNav(url, current){
        this.current = current;
        //const arr = ['index', 'square', 'send', 'message', 'user'];
        this.$cache.set('user_navTab', current);
        this.$emit('click', current);
      },
      hideModal (){},
      sendBtn () {
        this.sendshow = !this.sendshow;
      },
      sendLine (item) {
        if (item.url) {
          this.$tools.href(item.url);
          this.sendBtn();
        } else {
          this.$tips.alert(`此功能稍后开放`)
        }
      }
    },
    created () {}
  }
</script>
